<template>
  <div class="hui_theme">
    <div class="theme_top">
      <div class="centre">
        <div class="theme_top_nav">
          <ul>
            <li @click="hexinshuju">
              <span>
                <div class="icon2f">
                  <i class="iconfont">&#xe62f;</i>
<<<<<<< HEAD
                  <span></span>
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </div>

                <span>核心数据</span>
              </span>
            </li>
            <li @click="paihangbang">
              <span>
                <div class="icon29">
                  <i class="iconfont">&#xe629;</i>
<<<<<<< HEAD
                  <span></span>
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </div>
                <span>排行榜</span>
              </span>
            </li>
            <li @click="chadaxue">
              <span>
                <div class="icone6">
                  <i class="iconfont">&#xe6e6;</i>
<<<<<<< HEAD
                  <span></span>
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </div>
                <span>查学校</span>
              </span>
            </li>
            <li @click="chazhuanye">
              <span>
                <div class="icond0">
                  <i class="iconfont">&#xe6d0;</i>
<<<<<<< HEAD
                  <span></span>
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </div>
                <span>查专业</span>
              </span>
            </li>
            <router-link to="/OccupationTest/CareerPlan" tag="li">
<<<<<<< HEAD
              <span>
                <div class="icon0f">
                  <i class="iconfont">&#xe60f;</i>
                  <span></span>
=======
            <span>
                <div class="icon0f">
                  <i class="iconfont">&#xe60f;</i>
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </div>
                <span>职业生涯</span>
              </span>
            </router-link>
<<<<<<< HEAD
=======
           
>>>>>>> 314b442cce11d658746227581b0160373004c345
          </ul>
        </div>
        <div class="theme_top_school">
          <h3>
            <span>推荐学校</span>
            <i>
<<<<<<< HEAD
              <router-link class="router" :to="{ name: '/RecommendMore', params: { show: 1}}">更多学校</router-link>
=======
              <i class="iconfont">&#xe733;</i> 更多学校
>>>>>>> 314b442cce11d658746227581b0160373004c345
            </i>
          </h3>
          <ul>
            <router-link
              :to="{
              name:'/SchoolDeatil',
              params:{
                
               userId: list.schoolId
                
                },
              
              }"
              tag="li"
              v-for="(list , index) in schoolList"
<<<<<<< HEAD
              :key="index"
=======
              :key="list.schoolId"
>>>>>>> 314b442cce11d658746227581b0160373004c345
            >
              <div class="school_name">
                <div class="top">
                  <span>冲</span>
                  <img :src="list.logoUrl" alt />
                </div>
                <div class="buttom">{{list.provinceName}}</div>
                <div class="name">{{list.schoolName}}</div>
              </div>
            </router-link>
          </ul>
        </div>
      </div>
    </div>

    <div class="theme_buttom">
      <div class="centre">
        <h3>
          <span>推荐专业</span>
          <i>
<<<<<<< HEAD
            <!-- <i class="iconfont">&#xe733;</i> 更多专业 -->
            <router-link class="router" :to="{ name: '/RecommendMore', params: { show: 2}}">更多专业</router-link>
=======
            <i class="iconfont">&#xe733;</i> 更多专业
>>>>>>> 314b442cce11d658746227581b0160373004c345
          </i>
        </h3>
        <div class="theme_major">
          <ul>
            <router-link
              :to="{
              name:'/MajorDeatil',              
              query:{                
               majorId: list.majorAllId                
                },
              
              }"
              tag="li"
              v-for="list in majorList"
              :key="list.majorAllId"
            >
              <h4>{{list.major}}</h4>
              <h5>{{list.category}}</h5>
              <span>{{list.admissionNum}}人</span>
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "Theme",
  data() {
    return {
      schoolList: "",
      majorList: ""
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getSchool();
      this.getMajor();
    });
  },
  methods: {
    open3(s) {
      this.$message.error(s);
    },
    getSchool() {
      this.$ajax({
        method: "post",
        url: "/api/admissiondetails/getAdmissionDetails",

        success: res => {
          if (res.data.code == 0) {
            this.schoolList = res.data.data.admissionDetailsEntityList;
          } else {
            this.open3(res.data.mag);
          }
        }
      });
    },
    getMajor() {
      this.$ajax({
        method: "post",
        url: "/api/admissiondetails/getAdmissionMajor",

        success: res => {
          if (res.data.code == 0) {
            this.majorList = res.data.data;
          } else {
            this.open3(res.data.mag);
          }
        }
      });
    },
    hexinshuju: function() {
      this.$router.push({
        name: "/CoreData"
      });
    },
    paihangbang: function() {
      this.$router.push({
        name: "/RankList"
      });
    },
    chadaxue: function() {
      this.$router.push({
        name: "/FindSchool"
      });
    },
    chazhuanye: function() {
      this.$router.push({
        path: "/MajorDeatil",
        query: {
          majorId: 10957
        }
      });
    }
  }
};
</script>

<style lang="scss" >
.theme_top {
  width: 100%;
  background: #f9f9f9;
  .theme_top_nav {
    padding: 64px 0;

    ul {
      width: 100%;
      display: flex;
      display: flex;
      justify-content: space-between;
      align-content: center;
      li {
        display: block;
        display: flex;
        flex-direction: column;
        align-content: center;
        text-align: center;
        cursor: pointer;
        div {
          border-radius: 50%;
          width: 68px;
          height: 68px;
          color: #fff;
          line-height: 68px;
<<<<<<< HEAD
          margin-bottom: 26px;
=======
          margin-bottom: 16px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
          i {
            font-size: 36px;
          }
        }
        .icon2f {
          background: #a98ae3;
<<<<<<< HEAD
          position: relative;
          transition: box-shadow 1.2s;
          -moz-transition: box-shadow 1.2s;
          -webkit-transition: box-shadow 1.2s;
          -ms-transition: box-shadow 1.2s;
          -o-transition: box-shadow 1.2s;
          // > span {
          //   display: block;
          //   position: absolute;
          //   border-radius: 50px;
          //   width: 100%;
          //   height: 100%;
          //   top: 50%;
          //   left: 50%;
          //    transform: translate(-50%, -50%);
          //   -moz-transform: translate(-50%, -50%);

          //   -webkit-transform: translate(-50%, -50%);
          //   -ms-transform: translate(-50%, -50%);
          //   -o-transform: translate(-50%, -50%);
          // }
        }
        // .icon2f:hover {
        //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        //   transform: scale(1.1);
        //   -moz-transform: scale(1.1);
        //   -webkit-transform: scale(1.1);
        //   -ms-transform: scale(1.1);
        //   -o-transform: scale(1.1);
        // }
        // .icon2f:hover span {
        //   animation: f2 0.6s forwards;
        //   -moz-animation: f2 0.6s forwards;
        //   -webkit-animation: f2 0.6s forwards;
        //   -ms-animation: f2 0.6s forwards;
        //   -o-animation: f2 0.6s forwards;
        // }

        .icon29 {
          background: #7bbff8;
          transition: box-shadow 1.2s;
          -moz-transition: box-shadow 1.2s;
          -webkit-transition: box-shadow 1.2s;
          -ms-transition: box-shadow 1.2s;
          -o-transition: box-shadow 1.2s;
          // > span {
          //   display: block;
          //   position: absolute;
          //   border-radius: 50px;
          //   width: 100%;
          //   height: 100%;
          //   top: 50%;
          //   left: 50%;
          //    transform: translate(-50%, -50%);
          //   -moz-transform: translate(-50%, -50%);

          //   -webkit-transform: translate(-50%, -50%);
          //   -ms-transform: translate(-50%, -50%);
          //   -o-transform: translate(-50%, -50%);
          // }
        }

        // .icon29:hover {
        //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        //   transform: scale(1.1);

        //   -moz-transform: scale(1.1);
        //   -webkit-transform: scale(1.1);
        //   -ms-transform: scale(1.1);
        //   -o-transform: scale(1.1);
        // }
        // .icon29:hover span {
        //   animation: f29 0.6s forwards;
        //   -moz-animation: f29 0.6s forwards;
        //   -webkit-animation: f29 0.6s forwards;
        //   -ms-animation: f29 0.6s forwards;
        //   -o-animation: f29 0.6s forwards;
        // }

        .icone6 {
          background: #e6bc91;
          transition: box-shadow 1.2s;
          -moz-transition: box-shadow 1.2s;
          -webkit-transition: box-shadow 1.2s;
          -ms-transition: box-shadow 1.2s;
          -o-transition: box-shadow 1.2s;
          // > span {
          //   display: block;
          //   position: absolute;
          //   border-radius: 50px;
          //   width: 100%;
          //   height: 100%;
          //   top: 50%;
          //   left: 50%;
          //    transform: translate(-50%, -50%);
          //   -moz-transform: translate(-50%, -50%);

          //   -webkit-transform: translate(-50%, -50%);
          //   -ms-transform: translate(-50%, -50%);
          //   -o-transform: translate(-50%, -50%);
          // }
        }

        // .icone6:hover {
        //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        //   transform: scale(1.1);
        //   -moz-transform: scale(1.1);
        //   -webkit-transform: scale(1.1);
        //   -ms-transform: scale(1.1);
        //   -o-transform: scale(1.1);
        // }
        // .icone6:hover span {
        //   animation: e6 0.6s forwards;
        //   -moz-animation: e6 0.6s forwards;
        //   -webkit-animation: e6 0.6s forwards;
        //   -ms-animation: e6 0.6s forwards;
        //   -o-animation: e6 0.6s forwards;
        // }

        .icond0 {
          background: #f9dc74;
          transition: box-shadow 1.2s;
          -moz-transition: box-shadow 1.2s;
          -webkit-transition: box-shadow 1.2s;
          -ms-transition: box-shadow 1.2s;
          -o-transition: box-shadow 1.2s;
          // > span {
          //   display: block;
          //   position: absolute;
          //   border-radius: 50px;
          //   width: 100%;
          //   height: 100%;
          //   top: 50%;
          //   left: 50%;
          //    transform: translate(-50%, -50%);
          //   -moz-transform: translate(-50%, -50%);

          //   -webkit-transform: translate(-50%, -50%);
          //   -ms-transform: translate(-50%, -50%);
          //   -o-transform: translate(-50%, -50%);
          // }
        }

        // .icond0:hover {
        //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        //   transform: scale(1.1);
        //   -moz-transform: scale(1.1);
        //   -webkit-transform: scale(1.1);
        //   -ms-transform: scale(1.1);
        //   -o-transform: scale(1.1);
        // }
        // .icond0:hover span {
        //   animation: d0 0.6s forwards;
        //   -moz-animation: d0 0.6s forwards;
        //   -webkit-animation: d0 0.6s forwards;
        //   -ms-animation: d0 0.6s forwards;
        //   -o-animation: d0 0.6s forwards;
        // }

        .icon0f {
          background: #7babf8;
          transition: box-shadow 1.2s;
          -moz-transition: box-shadow 1.2s;
          -webkit-transition: box-shadow 1.2s;
          -ms-transition: box-shadow 1.2s;
          -o-transition: box-shadow 1.2s;

          // > span {
          //   display: block;
          //   position: absolute;
          //   border-radius: 50px;
          //   width: 100%;
          //   height: 100%;
          //   top: 50%;
          //   left: 50%;
          //   transform: translate(-50%, -50%);
          //   -moz-transform: translate(-50%, -50%);

          //   -webkit-transform: translate(-50%, -50%);
          //   -ms-transform: translate(-50%, -50%);
          //   -o-transform: translate(-50%, -50%);
          // }
        }

        // .icon0f:hover {
        //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        //   transform: scale(1.1);
        //   -moz-transform: scale(1.1);
        //   -webkit-transform: scale(1.1);
        //   -ms-transform: scale(1.1);
        //   -o-transform: scale(1.1);
        // }
        // .icon0f:hover span {
        //   animation: f0 0.6s forwards;
        //   -moz-animation: f0 0.6s forwards;
        //   -webkit-animation: f0 0.6s forwards;
        //   -ms-animation: f0 0.6s forwards;
        //   -o-animation: f0 0.6s forwards;
        // }
=======
        }
        .icon29 {
          background: #7bbff8;
        }
        .icone6 {
          background: #e6bc91;
        }
        .icond0 {
          background: #f9dc74;
        }
        .icon0f {
          background: #7babf8;
        }
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
    }
  }
  .theme_top_school {
    h3 {
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      span {
        font-size: 20px;
      }
      i {
        color: #959595;
        font-size: 16px;
<<<<<<< HEAD
        .router {
          text-decoration: none;
          color: #959595;
        }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
    }
    ul {
      padding: 64px 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-content: center;

      li {
        width: 226px;

        background: #fff;
        border-radius: 6px;
<<<<<<< HEAD
        transition: box-shadow 1s;
      }
      li:hover {
        box-shadow: 0 0 25px -2px rgba(0, 0, 0, 0.2);
      }

=======
      }
>>>>>>> 314b442cce11d658746227581b0160373004c345
      .school_name {
        text-align: center;
        padding: 30px 20px 60px 20px;

        div {
          margin: 14px 0;
        }
      }
      .buttom {
        color: #757575;
        font-size: 18px;
      }
      .name {
        font-size: 21px;
        color: #515151;
      }
      .top {
        position: relative;
        width: 100%;

        padding-bottom: 14px;
        span {
          display: block;
          width: 22px;
          height: 20px;
          font-size: 14px;
          color: #2e86ff;
          text-align: center;
          line-height: 22px;
          border-radius: 50%;
          position: absolute;
          top: 0;
          right: 0;
          border: solid 1px #2e86ff;
        }
        img {
          width: 76px;
        }
      }
    }
  }
}

.theme_buttom {
  background: #f3f3f3;
  padding-top: 90px;
  h3 {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    span {
      font-size: 20px;
    }
    i {
      color: #959595;
      font-size: 16px;
<<<<<<< HEAD
      .router {
        text-decoration: none;
        color: #959595;
      }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  }
  .theme_major {
    width: 100%;
    padding: 66px 0;

    ul {
      display: flex;
      justify-content: space-between;
      text-align: center;
      li {
        padding: 78px 0;
        width: 226px;
        background: #fff;
        border-radius: 6px;
        h4 {
          margin-bottom: 22px;
          color: #414141;
          font-size: 18px;
        }
        h5 {
          color: #757575;
          font-size: 16px;
          margin-bottom: 64px;
        }
        span {
          color: #2e86ff;
          font-size: 18px;
        }
<<<<<<< HEAD
        transition: box-shadow 1s;
      }
      li:hover {
        box-shadow: 0 0 25px -2px rgba(0, 0, 0, 0.2);
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
    }
  }
}
<<<<<<< HEAD
// @keyframes f2 {
//   0% {
//     padding: 0px;
//     border: 6px solid #a98ae3;
//   }
//   50% {
//     padding: 8px;
//     border: 5px solid #a98ae3;
//   }
//   100% {
//     padding: 6px;
//     border: 4px solid #a98ae3;
//   }
// }
// @keyframes f29 {
//   0% {
//     padding: 0px;
//     border: 6px solid #7bbff8;
//   }
//   50% {
//     padding: 8px;
//     border: 5px solid #7bbff8;
//   }
//   100% {
//     padding: 6px;
//     border: 4px solid #7bbff8;
//   }
// }
// @keyframes e6 {
//   0% {
//     padding: 0px;
//     border: 6px solid #e6bc91;
//   }
//   50% {
//     padding: 8px;
//     border: 5px solid #e6bc91;
//   }
//   100% {
//     padding: 6px;
//     border: 4px solid #e6bc91;
//   }
// }
// @keyframes d0 {
//   0% {
//     padding: 0px;
//     border: 6px solid #f9dc74;
//   }
//   50% {
//     padding: 8px;
//     border: 5px solid #f9dc74;
//   }
//   100% {
//     padding: 6px;
//     border: 4px solid #f9dc74;
//   }
// }
// @keyframes f0 {
//   0% {
//     padding: 0px;
//     border: 6px solid #7babf8;
//   }
//   50% {
//     padding: 8px;
//     border: 5px solid #7babf8;
//   }
//   100% {
//     padding: 6px;
//     border: 4px solid #7babf8;
//   }
// }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
</style>